<!DOCTYPE html>
<html>
<head>
  <title>登录斯兔权限系统</title>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__STATIC__/layui2.5.4/css/layui.css" media="all">
  <link rel="stylesheet" href="__STATIC__/css/welcome.css" media="all">
  <link rel="stylesheet" href="__STATIC__/css/message.css" media="all">
</head>
<body>
<div class="layui-tab layui-tab-brief" style="padding: 5px 0;margin: 0;">
  <ul class="layui-tab-title" style="text-align: center;">
    <li class="layui-this">通知(5)</li>
    <li>私信(12)</li>
    <li>待办(3)</li>
  </ul>
  <div class="layui-tab-content" style="padding: 5px 0;">
    <!-- tab1 -->
    <div class="layui-tab-item layui-show">
      <div class="message-list">
        <!-- 实际项目请使用后台数据循环出来 -->
        <a class="message-list-item" href="javascript:;">
          <img class="message-item-icon" src="__STATIC__/images/message.png">
          <div class="message-item-right">
            <h2 class="message-item-title">你收到了14份新周报</h2>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a class="message-list-item" href="javascript:;">
          <img class="message-item-icon" src="__STATIC__/images/message.png">
          <div class="message-item-right">
            <h2 class="message-item-title">你收到了14份新周报</h2>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a class="message-list-item" href="javascript:;">
          <img class="message-item-icon" src="__STATIC__/images/message.png">
          <div class="message-item-right">
            <h2 class="message-item-title">你收到了14份新周报</h2>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <!-- 列表为空 -->
        <div class="message-list-empty" style="display: none;">
          <img src="__STATIC__/images/img_msg_notice.svg">
          <div>没有通知</div>
        </div>
      </div>
      <a class="message-btn-clear" href="javascript:;">全部标记已读</a>
    </div>
    <!-- tab2 -->
    <div class="layui-tab-item">
      <div class="message-list">
        <a class="message-list-item" href="javascript:;">
          <img class="message-item-icon" src="__STATIC__/images/head.png">
          <div class="message-item-right">
            <h2 class="message-item-title">xx评论了你</h2>
            <p class="message-item-text">哈哈哈哈哈哈</p>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a class="message-list-item" href="javascript:;">
          <img class="message-item-icon" src="__STATIC__/images/head.png">
          <div class="message-item-right">
            <h2 class="message-item-title">xx评论了你</h2>
            <p class="message-item-text">哈哈哈哈哈哈</p>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a class="message-list-item" href="javascript:;">
          <img class="message-item-icon" src="__STATIC__/images/head.png">
          <div class="message-item-right">
            <h2 class="message-item-title">xx评论了你</h2>
            <p class="message-item-text">哈哈哈哈哈哈</p>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a id="btn-more1" class="message-btn-more" href="javascript:;">加载更多</a>
        <!-- 列表为空 -->
        <div class="message-list-empty" style="display: none;">
          <img src="__STATIC__/images/img_msg_pri.svg">
          <div>没有消息</div>
        </div>
      </div>
      <a class="message-btn-clear" href="javascript:;">清空消息</a>
    </div>
    <!-- tab3 -->
    <div class="layui-tab-item">
      <div class="message-list">
        <a class="message-list-item" href="javascript:;">
          <div class="message-item-right">
            <span class="layui-badge pull-right">待完成</span>
            <h2 class="message-item-title">你收到了14份新周报</h2>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a class="message-list-item" href="javascript:;">
          <div class="message-item-right">
            <span class="layui-badge layui-bg-gray pull-right">已完成</span>
            <h2 class="message-item-title">你收到了14份新周报</h2>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <a class="message-list-item" href="javascript:;">
          <div class="message-item-right">
            <span class="layui-badge layui-bg-gray pull-right">已完成</span>
            <h2 class="message-item-title">你收到了14份新周报</h2>
            <p class="message-item-text">10个月前</p>
          </div>
        </a>
        <!-- 列表为空 -->
        <div class="message-list-empty" style="display: none;">
          <img src="__STATIC__/images/img_msg_db.svg">
          <div>没有待办</div>
        </div>
      </div>
      <a class="message-btn-clear" href="javascript:;">清空待办</a>
    </div>
  </div>
</div>
<script src="__STATIC__/js/jquery-1.11.2.min.js"></script>
<script src="__STATIC__/layui2.5.4/layui.js"></script>
<script>
    layui.use(['layer', 'form', 'element', 'table'], function () {
    });
</script>
</body>
</html>